<template>
  <div>
    <h2>房型添加</h2>
    <table>
      <tr>
        <td>房型名称:</td>
        <td>
          <input type="text" v-model="state.fxName" />
        </td>
      </tr>
      <tr>
        <td>房型面积:</td>
        <td>
          <input type="text" v-model="state.fxmj" />
        </td>
      </tr>
      <tr>
        <td>房型图片:</td>
        <td>
          <input type="file" @change="TP" />
          <img :src="src" width="60" height="60" v-if="src != ''" />
        </td>
      </tr>
      <tr>
        <td>房型描述:</td>
        <td>
          <textarea v-model="state.fxms"></textarea>
        </td>
      </tr>

      <tr>
        <td>
          <input type="button" value="添加" @click="FangXingAdd" />
        </td>
        <td>
          <input type="button" value="列表" @click="FangXingShow" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
  state: {
    fxName: '',
    fxmj: '',
    fxPhoto: '',
    fxms: '',
  },
  src: '',
});
let { state, src } = toRefs(data);


function TP(e:any)
{
  var FD=new FormData();
  var file=e.target.files[0];
  FD.append('file',file);
  axios({
    url:'https://localhost:7143/api/FangXing/TP',
    method:'post',
    data:FD
  })
  .then(res=>{
    console.log(res)
    if(res.data.data=="图片不能大于2M")
  {
    alert('图片不能大于2M')
    return 
  }
  else
  {
    src.value=res.data.data
  }
    
  })
  .catch(err=>{
  console.log(err)
})
}


function FangXingShow(){
  router.push('/FangXingShow')
}


//房型添加
function FangXingAdd() {
  let obj = {
    fxName:state.value.fxName,
    fxmj:state.value.fxmj,
    fxPhoto:src.value,
    fxms:state.value.fxms,
    fxzt:"1",
    fxIsDeleted:"0",
  };
  console.log(obj)

axios({
  url:'https://localhost:7143/api/FangXing/FangXingAdd',
  method:'post',
  data:obj
})
.then(res=>{
  if(res.data.data==-1)
{
  alert('房型名称不能重复')
  return
}
if(res.data.data>0)
{
  alert('添加成功')
  router.push('/FangXingShow')
}
})

.catch(err=>{
  console.log(err)
})

}
</script>

<style scoped></style>
